<meta charset="UTF-8">
<style>
    * {padding:0;margin:0}
    body {background-color: black;}
    </style>
    
    <body>
        <div class="xuetiao" style="width:100px;
        height:50px;
        background:pink">
            <div class="xue" style="width:100px;
            height:50px;
            background:red"></div>
        </div>
    </body>
    
    <script>
    setInterval(function() {
        var imgObj = document.createElement('img')
        imgObj.src = './star.jpg'
        var min = 40
        var max = 60
        var temp =  Math.floor( Math.random()* (max-min+1)+min)
        imgObj.width = temp
        var leftMin = 0
        var leftMax = (window.innerWidth || document.documentElement.clientWidth) - temp
        var left =  Math.floor( Math.random()* (leftMax-leftMin+1)+leftMin)
        var topMin = 0
        var topMax = (window.innerHeight || document.documentElement.clientHeight) - temp
        var top =  Math.floor( Math.random()* (topMax-topMin+1)+topMin)
        imgObj.style.position = 'absolute'
        imgObj.style.left = left + 'px'
        imgObj.style.top = top + 'px'
        document.body.appendChild(imgObj)
    }, 3000)
    document.body.onclick = function(evt) {
        var e = evt || window.event
        var target = e.target || e.srcElement 
        if (target.nodeName === 'IMG')
        {
        document.body.removeChild(target)
    
        var xue = parseInt(document.querySelector('.xue').style.width)
    if (xue+1 !==100)
        {
    document.querySelector('.xue').style.width = xue+1 + 'px'
            }
        }
    }
    setInterval(function() {
        var xue = parseInt(document.querySelector('.xue').style.width)
        document.querySelector('.xue').style.width = xue-1 + 'px'
    }, 1000)
    </script>
